<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>生成地图缓存作业</title>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://cdn.bootcss.com/openlayers/4.0.1/ol.css" rel="stylesheet">
    <style>
        .ol-popup {
            position: absolute;
            top: 10px;
            right: 10px;
        }
    </style>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="model" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">提示</h4>
            </div>
            <div class="modal-body">
                <p>正在创建生成地图缓存作业...</p>
            </div>
        </div>
    </div>
</div>
<div id="map" style="width: 100%;height:100%;border: 1px solid #dddddd"></div>
<div id="popup" class="ol-popup" style='width:22%'>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">地图缓存作业</h3>
        </div>
        <div class="panel-body">
            <div class="input-group">
                <span class="input-group-addon">输入数据　　　</span>
                <div>
                    <select class="form-control" id="datasetName" name="clientType">
                        <option selected="selected">test_newyork_taxi_2013_01_14k</option>
                    </select>
                </div>
            </div>
            <p>
            <div class="input-group">
                <span class="input-group-addon">缓存类型　　　</span>
                <div>
                    <select class="form-control" id="imageType" name="clientType">
                        <option value="Heatmap" selected="selected">热度图</option>
                    </select>
                </div>
            </div>
            <p>
            <div class="input-group">
                <span class="input-group-addon">缓存范围　　　</span>
                <input id="bounds" type="text" class="form-control" placeholder="-74.050, 40.650, -73.850, 40.850"/>
            </div>
            <p>
            <div class="input-group">
                <span class="input-group-addon">缓存比例尺级别</span>
                <input id="level" type="text" class="form-control" placeholder="5"/>
            </div>
            <p>
            <div class="input-group">
                <span class="input-group-addon">缓存名称　　　</span>
                <input id="cacheName" type="text" class="form-control" placeholder="cache"/>
            </div>
            <p>
            <div class="input-group">
                <span class="input-group-addon">存储类型　　　</span>
                <div>
                    <select class="form-control" id="cacheType" name="clientType">
                        <option selected="selected">MongoDB</option>
                    </select>
                </div>
            </div>
            <p>
            <div class="input-group">
                <span class="input-group-addon">服务地址　　　</span>
                <input id="serverAdresses" type="text" class="form-control" placeholder="113.209.64.227:27010"/>
            </div>
            <p>
            <div class="input-group">
                <span class="input-group-addon">数据库　　　　</span>
                <input id="database" type="text" class="form-control" placeholder="smtiles"/>
            </div>
            <p>
            <div class="input-group">
                <span class="input-group-addon">版本　　　　　</span>
                <input id="version" type="text" class="form-control" placeholder="v1"/>
            </div>
            <p>
            <div align="right">
                <input type="button" id='btn' class="btn btn-primary" value="创建"/>
            </div>
        </div>
    </div>
</div>

<script src="http://cdn.bootcss.com/openlayers/4.0.1/ol-debug.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../../dist/iclient9-openlayers.js"></script>
<script type="text/javascript">

    $('.dropdown-menu').on('click', function (e) {
        var $target = $(e.target);
        $('#imageTypeBtn').text($target.text())
    });

    var layer, processingJobsUrl = "http://113.209.64.227:8090/iserver/services/processing/rest/v1/jobs",
            token = 'GSHB7qlocJkqEH0Ld6VUSGQfekOdPd3e9UdJoHjiupfbkGDggXQLSPWd6VaKm8NH4gvXx6UQ0TCI5wpfr-4Tlw..',
            map = new ol.Map({
                target: 'map',
                view: new ol.View({
                    center: [-73.95, 40.75],
                    zoom: 12,
                    projection: 'EPSG:4326'
                })
            }),
            bounds = [],
            serverAddress = [];
    var resolutions = [];
    for (var i = 6; i < 10; i++) {
        resolutions.push(0.703125 / (Math.pow(2, i)));
    }
    map.addLayer(new ol.layer.Tile({
        source: new ol.source.Tianditu({
            url: "http://t0.tianditu.com/vec_c/wmts",
            matrixSet: 'c',
            layer: 'vec',
            projection: "EPSG:4326"
        })
    }));
    ($('#bounds').val() || $('#bounds').attr('placeholder')).split(',').map(function (el) {
        return bounds.push(parseFloat(el));
    });
    serverAddress.push(($('#serverAdresses').val() || $('#serverAdresses').attr('placeholder')).toString());
    var buildCacheJobParameter = new SuperMap.BuildCacheJobParameter({
                datasetName: $('#datasetName option:selected').text(),
                cacheName: $('#cacheName').val() || $('#cacheName').attr('placeholder'),
                cacheType: $('#cacheType option:selected').text(),
                serverAdresses: serverAddress,
                database: $('#database').val() || $('#database').attr('placeholder'),
                version: $('#version').val() || $('#version').attr('placeholder'),
                bounds: bounds,
                imageType: $('#imageType option:selected').attr('value'),
                level: parseInt($('#level').val() || $('#level').attr('placeholder'))
            }),
            processingJobsService = new ol.supermap.ProcessingJobsService(processingJobsUrl),
            popup = document.getElementById('popup');

    var info = new ol.control.Control({element: popup});
    info.setMap(map);
    map.addControl(info);

    SuperMap.Credential.CREDENTIAL = new SuperMap.Credential(token, 'token');

    $('#btn').on('click', function () {
        $('#btn').prop('disabled', true);
        $("#model").modal({show: true, backdrop: 'static', keyboard: false});
        if (map && layer) {
            map.removeLayer(layer);
        }
        processingJobsService.addBuildCacheJob(buildCacheJobParameter, function (serviceResult) {
            if (serviceResult.error) {
                $('#btn').prop('disabled', false);
                $("#model").modal('hide');
                alert('创建失败!');
                return;
            }
            serviceResult.result.setting.serviceInfo.targetServiceInfos.map(function (info) {
                if (info.serviceType === 'RESTMAP') {
                    SuperMap.Request.get(info.serviceAddress + '/maps').then(function (response) {
                        return response.json();
                    }).then(function (result) {
                        var mapUrl = result[0].path;
                        new ol.supermap.MapService(mapUrl).getMapInfo(function (mapInfo) {
                            layer = new ol.layer.Tile({
                                source: new ol.supermap.TileSuperMapRest(ol.supermap.TileSuperMapRest.optionsFromMapJSON(mapUrl, mapInfo.result))
                            });
                            map.addLayer(layer);
                            $("#model").modal('hide');
                            $('#btn').prop('disabled', false);
                        });
                    });
                }
            });
        });
    });

</script>
</body>
</html>